<template>
  <view>
    <uni-nav-bar
      title="''"
      statusBar
      color="#333"
      backgroundColor="#fff"
      leftWidth="auto"
    >
      <view
        class="navbar-left"
        slot="left"
      >
        <view class="navbar-left-item active">自提</view>
        <view class="navbar-left-item">外送</view>
      </view>
      <view @click="handleSearch">
        <uni-search-bar
          placeholder="茉莉奶绿"
          radius="100"
          cancelButton="'none'"
          readonly
        />
      </view>
    </uni-nav-bar>
  </view>
</template>
<script>
export default {
  name: "MenuTopBanner",
  methods: {
    handleSearch() {
      uni.navigateTo({
        url: "/pages/menu-subs/search"
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.navbar-left {
  display: flex;
  align-items: center;
  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: $uni-text-color;
    padding: $uni-spacing-row-sm $uni-spacing-row-base;

    &.active {
      font-weight: 600;
    }
  }
}
</style>
